<template>
  <div class="app-container">
    <div class="filter-container">
      <search ref="searchForm" :rq="defaultRq" @change="change(arguments)" />
      <div class="filter-item">
        <el-button v-waves :loading="listLoading" class="filter-item" type="primary" size="small" icon="el-icon-search" @click="handleSearch">查询</el-button>
      </div>
      <div class="filter-item">
        <el-button v-waves :loading="downloadLoading" class="filter-item" type="primary" size="small" icon="el-icon-download" @click="handleDownload">导出</el-button>
      </div>
    </div>
    <el-table v-loading="listLoading" :data="list" size="mini" fit highlight-current-row style="width: 100%;" max-height="550">
      <el-table-column label="线路名称" align="center" width="150" fixed>
        <template slot-scope="{ row }">
          <span>{{ row.xlmc }}</span>
        </template>
      </el-table-column>
      <el-table-column label="所属企业" align="center" width="100">
        <template slot-scope="{ row }">
          <span>{{ row.yhjc }}</span>
        </template>
      </el-table-column>
      <el-table-column label="调度方式" align="center" width="80">
        <template slot-scope="{ row }">
          <span>{{ row.ddfs }}</span>
        </template>
      </el-table-column>
      <el-table-column label="监管配车" align="center">
        <el-table-column label="额定数" align="center" width="60">
          <template slot-scope="{ row }">
            <span>{{ row.pc_jh }}</span>
          </template>
        </el-table-column>
        <el-table-column label="出车数" align="center" width="60">
          <template slot-scope="{ row }">
            <span>{{ row.pc }}</span>
          </template>
        </el-table-column>
        <el-table-column label="出车率(%)" align="center" width="80">
          <template slot-scope="{ row }">
            <span>{{ row.pcl }}</span>
          </template>
        </el-table-column>
        <el-table-column label="在线数" align="center" width="60">
          <template slot-scope="{ row }">
            <span>{{ row.pc_gps_zaixian }}</span>
          </template>
        </el-table-column>
        <el-table-column label="在线率(%)" align="center" width="80">
          <template slot-scope="{ row }">
            <span>{{ row.pc_gps_zaixian_ratio }}</span>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column label="监管班次" align="center">
        <el-table-column label="计划数" align="center" width="60">
          <template slot-scope="{ row }">
            <span>{{ row.bc_jh }}</span>
          </template>
        </el-table-column>
        <el-table-column label="执行数" align="center" width="60">
          <template slot-scope="{ row }">
            <span>{{ row.bc }}</span>
          </template>
        </el-table-column>
        <el-table-column label="执行率(%)" align="center" width="80">
          <template slot-scope="{ row }">
            <span>{{ row.bcl }}</span>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column label="准点率(%)" align="center">
        <el-table-column label="首班" align="center" width="80">
          <template slot-scope="{ row }">
            <span>{{ row.firststop_fers_ot_ratio }}</span>
          </template>
        </el-table-column>
        <el-table-column label="末班" align="center" width="80">
          <template slot-scope="{ row }">
            <span>{{ row.endstop_fers_ot_ratio }}</span>
          </template>
        </el-table-column>
        <el-table-column label="首末班" align="center" width="80">
          <template slot-scope="{ row }">
            <span>{{ row.smbzdl }}</span>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column label="企业电子路单" align="center">
        <el-table-column label="配车" align="center">
          <el-table-column label="计划数" align="center" width="60">
            <template slot-scope="{ row }">
              <span>{{ row.qyjhpcs }}</span>
            </template>
          </el-table-column>
          <el-table-column label="出车数" align="center" width="60">
            <template slot-scope="{ row }">
              <span>{{ row.pc_jd }}</span>
            </template>
          </el-table-column>
          <el-table-column label="出车率(%)" align="center" width="80">
            <template slot-scope="{ row }">
              <span>{{ row.pcl_qy }}</span>
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column label="班次" align="center">
          <el-table-column label="计划数" align="center" width="60">
            <template slot-scope="{ row }">
              <span>{{ row.qyjhbcs }}</span>
            </template>
          </el-table-column>
          <el-table-column label="执行数" align="center" width="60">
            <template slot-scope="{ row }">
              <span>{{ row.bc_jd }}</span>
            </template>
          </el-table-column>
          <el-table-column label="执行率(%)" align="center" width="80">
            <template slot-scope="{ row }">
              <span>{{ row.bcl_qy }}</span>
            </template>
          </el-table-column>
        </el-table-column>
      </el-table-column>
      <el-table-column label="差异(%)" align="center">
        <el-table-column label="出车数差异率" align="center" width="80">
          <template slot-scope="{ row }">
            <span>{{ row.pcs_cy }}</span>
          </template>
        </el-table-column>
        <el-table-column label="出车率差异" align="center" width="80">
          <template slot-scope="{ row }">
            <span>{{ row.pcl_cy }}</span>
          </template>
        </el-table-column>
        <el-table-column label="班次执行数差异率" align="center" width="80">
          <template slot-scope="{ row }">
            <span>{{ row.bcs_cy }}</span>
          </template>
        </el-table-column>
        <el-table-column label="班次执行率差异" align="center" width="80">
          <template slot-scope="{ row }">
            <span>{{ row.bcl_cy }}</span>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column label="GPS" align="center">
        <el-table-column label="配车" align="center">
          <el-table-column label="出车数" align="center" width="60">
            <template slot-scope="{ row }">
              <span>{{ row.pc_gps }}</span>
            </template>
          </el-table-column>
          <el-table-column label="出车率(%)" align="center" width="80">
            <template slot-scope="{ row }">
              <span>{{ row.pcl_gps }}</span>
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column label="班次" align="center">
          <el-table-column label="执行数" align="center" width="60">
            <template slot-scope="{ row }">
              <span>{{ row.bc_gps }}</span>
            </template>
          </el-table-column>
          <el-table-column label="执行率(%)" align="center" width="80">
            <template slot-scope="{ row }">
              <span>{{ row.bcl_gps }}</span>
            </template>
          </el-table-column>
        </el-table-column>
      </el-table-column>
      <el-table-column label="RFID" align="center">
        <el-table-column label="配车" align="center">
          <el-table-column label="出车数" align="center" width="60">
            <template slot-scope="{ row }">
              <span>{{ row.pc_rfid }}</span>
            </template>
          </el-table-column>
          <el-table-column label="出车率(%)" align="center" width="80">
            <template slot-scope="{ row }">
              <span>{{ row.pcl_rfid }}</span>
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column label="班次" align="center">
          <el-table-column label="执行数" align="center" width="60">
            <template slot-scope="{ row }">
              <span>{{ row.bc_rfid }}</span>
            </template>
          </el-table-column>
          <el-table-column label="执行率(%)" align="center" width="80">
            <template slot-scope="{ row }">
              <span>{{ row.bcl_rfid }}</span>
            </template>
          </el-table-column>
        </el-table-column>
      </el-table-column>
      <el-table-column label="GPS_RFID联合" align="center">
        <el-table-column label="配车" align="center">
          <el-table-column label="出车数" align="center" width="60">
            <template slot-scope="{ row }">
              <span>{{ row.pc_gps_rfid }}</span>
            </template>
          </el-table-column>
          <el-table-column label="出车率(%)" align="center" width="80">
            <template slot-scope="{ row }">
              <span>{{ row.pcl_gps_rfid }}</span>
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column label="班次" align="center">
          <el-table-column label="执行数" align="center" width="60">
            <template slot-scope="{ row }">
              <span>{{ row.bc_gps_rfid }}</span>
            </template>
          </el-table-column>
          <el-table-column label="执行率(%)" align="center" width="80">
            <template slot-scope="{ row }">
              <span>{{ row.bcl_gps_rfid }}</span>
            </template>
          </el-table-column>
        </el-table-column>
      </el-table-column>
    </el-table>
    <div class="pagination-class">
      <pagination v-show="total > 0" :total="total" :page.sync="listQuery.pageNum" :limit.sync="listQuery.pageSize" @pagination="getList" />
    </div>
  </div>
</template>

<script>
import { getXlbcpcPage, getXlbcpcOutput } from '@/api/xlgjday';
import waves from '@/directive/waves';
import Pagination from '@/components/Pagination';
import { formatJson, parseTime } from '@/utils';
import Search from '@/views/database/searchByDate.vue';

export default {
  name: 'Xlbcpc',
  components: { Pagination, Search },
  directives: { waves },
  data() {
    return {
      list: [],
      total: 0,
      listLoading: true,
      downloadLoading: false,
      listQuery: {
        pageNum: 1,
        pageSize: 10,
        rq: '',
        yhid: '',
        jgxlid: null
      },
      defaultRq: ''
    };
  },
  created() {
    const nowDate = new Date();
    const beforeDate = nowDate.setDate(nowDate.getDate() - 2);
    this.defaultRq = parseTime(beforeDate, '{y}-{m}-{d}');
    this.listQuery.rq = this.defaultRq;
    this.getList();
  },
  methods: {
    async getList() {
      if (this.listQuery.rq === '' || this.listQuery.rq === null) {
        this.$message.error('请选择日期');
        return;
      }
      this.listLoading = true;
      await getXlbcpcPage(this.listQuery).then(response => {
        this.list = response.data.list;
        this.total = response.data.total;
        this.listLoading = false;
      });
    },
    async handleSearch() {
      this.getList();
    },
    change(data) {
      if (data[0] === 'Yhxx') {
        this.listQuery.yhid = data[1];
      } else if (data[0] === 'Xl') {
        this.listQuery.jgxlid = data[1];
      } else if (data[0] === 'Rq') {
        this.listQuery.rq = data[1];
      }
    },
    async handleDownload() {
      if (this.total === 0) {
        this.$message.error('暂无数据');
        return;
      }
      this.downloadLoading = true;
      await getXlbcpcOutput(this.listQuery).then(response => {
        if (this.listQuery.rq === '') {
          this.$message.error('请选择日期');
          return;
        }
        if (response.data.length === 0) {
          this.$message.error('暂无数据，请重新刷新页面');
          return;
        }
        import('@/vendor/Export2Excel').then(excel => {
          const tHeader = ['线路名称', '所属企业', '调度方式', '监管配车额定数', '监管配车出车数', '监管配车出车率(%)', '监管配车在线数', '监管配车在线率(%)', '监管班次计划数', '监管班次执行数', '监管班次执行率(%)', '首班准点率(%)', '末班准点率(%)', '首末班准点率(%)', '企业电子路单配车计划数', '企业电子路单配车出车数', '企业电子路单配车出车率(%)', '企业电子路单班次计划数', '企业电子路单班次执行数', '企业电子路单班次执行率(%)', '出车数差异率(%)', '出车率差异(%)', '班次执行数差异率(%)', '班次执行率差异(%)', 'GPS配车出车数', 'GPS配车出车率(%)', 'GPS班次执行数', 'GPS班次执行率(%)', 'RFID配车出车数', 'RFID配车出车率(%)', 'RFID班次执行数', 'RFID班次执行率(%)', 'GPS_RFID联合配车出车数', 'GPS_RFID联合配车出车率(%)', 'GPS_RFID联合班次执行数', 'GPS_RFID联合班次执行率(%)'];
          const filterVal = ['xlmc', 'yjhc', 'ddfs', 'pc_jh', 'pc', 'pcl', 'pc_gps_zaixian', 'pc_gps_zaixian_ratio', 'bc_jh', 'bc', 'bcl', 'firststop_fers_ot_ratio', 'endstop_fers_ot_ratio', 'smbzdl', 'qyjhpcs', 'pc_jd', 'pcl_qy', 'qyjhbcs', 'bc_jd', 'bcl_qy', 'pcs_cy', 'pcl_cy', 'bcs_cy', 'bcl_cy', 'pc_gps', 'pcl_gps', 'bc_gps', 'bcl_gps', 'pc_rfid', 'pcl_rfid', 'bc_rfid', 'bcl_rfid', 'pc_gps_rfid', 'pcl_gps_rfid', 'bc_gps_rfid', 'bcl_gps_rfid'];
          const data = formatJson(response.data, filterVal);
          excel.export_json_to_excel({
            header: tHeader,
            data,
            filename: '线路班次配车信息'
          });
          this.downloadLoading = false;
          this.$message({
            message: '线路班次配车信息导出成功',
            type: 'success'
          });
        });
      });
    }
  }
};
</script>
